<template>
  <view>
    <view>
      <image
        class="banner_img"
        :src="`${ossUrl}/a77a42b5-8829-424b-b055-35c2a14ddda8.png`"
      ></image>
      <view class="swiper_wrapper">
        <swiper
          class="swiper"
          :indicator-dots="true"
          indicator-color="rgba(255,255,255,0.65)"
          indicator-active-color="#ffffff"
          :autoplay="true"
        >
          <swiper-item
            v-for="img of bannerList"
            :key="img.imgId"
            @click="jump(img.appId,img.redirectUrl)"
          >
            <view class="swiper-item uni-bg-red">
              <image
                class="banner_item_img"
                :src="img.imgUrl"
              >

              </image>
            </view>
          </swiper-item>
        </swiper>
      </view>
    </view>
    <view class="set_title">
      <view class="set_title_a">
        有生活的地方就有商旅
      </view>
      <view class="set_title_b">
        品质生活一站式服务平台
      </view>
      <image
        class="title_img"
        :src="`${ossUrl}/Title_Bg.png`"
      ></image>
    </view>
    <view
      v-for="(item,index) in cardData"
      :key="index"
    >
      <card
        v-if="cardData.length>0"
        :itemData="item"
      >

      </card>
    </view>
    <view>
      <image
        class="end_title"
        :src="`${ossUrl}/Bottom_Image.png`"
      ></image>
    </view>
    <view v-if="vipBtnFlag">
      <image
        class="card_vip"
        :src="`${ossUrl}/Footer_Image_Bg.png`"
      ></image>
    </view>
    <view
      v-if="vipBtnFlag"
      class="btn"
      @click="jumpRegister"
    >
      立即开通
    </view>
    <!-- <view class="web">
      <view class="border"></view>
      <view class="web_text">www.shanglvvip.com</view>
      <view class="border"></view>
    </view> -->
    <view class="phone">
      本活动最终解释权归杭州市商贸旅游集团有限公司所有
    </view>
    <view
      class="fixed_btn"
      v-if="vipBtnFlag"
      @click="jumpRegister"
    >
      <image
        class="fixed_btn_img"
        :src="`${ossUrl}/R_Hover_Button.png`"
      ></image>
    </view>
  </view>

</template>

<script>
import card from "../../components/card";
export default {
  data() {
    return {
      title: "Hello",
      ossUrl:
        "https://svip-picture.oss-cn-hangzhou.aliyuncs.com/baokuan/chaojihuiyuan_slices2",
      cardData: [],
      vipBtnFlag: "true",
      bannerList: []
    };
  },
  components: {
    card
  },
  onLoad() {
    // #ifdef MP-WEIXIN
    this.getUserInfo();
    // #endif
    // #ifdef H5
    console.log("App Launch");
    console.log("win", window.location.href);
    const query = window.location.href.split("?")[1];
    let code = "";
    let state = "";
    if (query) {
      code = query.split("&")[0].split("=")[1];
      // state = query.split("&")[1].split("=")[1];
    }
    uni.request({
      url:
        "https://customer.hzslsf.com/webchatslzt-server/api/webchat/loginByWechatCode", //仅为示例，并非真实接口地址。
      method: "GET",
      data: {
        code
      },
      success: res => {
        console.log(res.data);
        if (Number(res.data.code) === 10000) {
          if (res.data.data.uToken) {
            uni.setStorageSync("uToken", res.data.data.uToken);
            console.log(123, res);
            this.vipBtnFlag = false;
          } else {
            uni.setStorageSync("openId", JSON.stringify(res.data.data.openId));
          }
        }else {
          window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxed883f0e007398fc&redirect_uri=http%3A%2F%2Fcustomer.hzslsf.com%2Fbaokuan%2F%23%2F&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect'
        }
      },
      fail:err =>{
          window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxed883f0e007398fc&redirect_uri=http%3A%2F%2Fcustomer.hzslsf.com%2Fbaokuan%2F%23%2F&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect'
      }
    });
    // #endif
    this.getGoodsList();
    this.getBanner();
  },
  onShareAppMessage() {
    return {
      title: "杭商旅超级会员",
      path: "/pages/index/index"
    };
  },
  methods: {
    getBanner() {
      // #ifdef MP-WEIXIN
      const type = 1;
      // #endif
      // #ifdef H5
      const type = 2;
      // #endif
      uni.request({
        url: "https://bk.hzslsf.com/hzsl-service/banner/getList",
        method: "POST",
        data: {
          imgType: type,
          pageNum: 1,
          pageSize: 10
        },
        success: res => {
          this.bannerList = res.data.result.list;
          console.log("res====", res.data.result.list);
        }
      });
    },
    getGoodsList() {
      uni.showLoading({
        title: "加载中"
      });
      let type = 1;
      // #ifdef H5
      type = 2;
      // #endif
      uni.request({
        url: "https://bk.hzslsf.com/hzsl-service/goods/getHomeGoodsList",
        method: "POST",
        data: {
          type
        },
        success: res => {
          uni.hideLoading();
          console.log("res", res.data.result.floorVOList);
          this.cardData = res.data.result.floorVOList;
          // console.log("name", this.cardData[0].foodsVOList[0].name);
          // this.cardData.forEach(item => {
          //   item.foodsVOList.forEach(i => {
          //     for (let a = 0; a < 200; a++) {
          //       this.uma.trackEvent("eventClick", { name: i.name });
          //       // console.log("name===", i.name);
          //     }
          //   });
          // });
          // setInterval(() => {
          //   // #ifdef MP-WEIXIN
          //   console.log('name',this.cardData[0].foodsVOList[0].name)
          //   this.uma.trackEvent("eventClick", { title: this.cardData[0].name });
          //   // #endif
          // }, 100);
        }
      });
    },
    jumpRegister() {
      // #ifdef MP-WEIXIN
      this.uma.trackEvent("submitBtn");
      // #endif
      // #ifdef H5
      window._czc.push(["_trackEvent", "首页", "点击跳转登录"]);
      // #endif
      uni.navigateTo({
        url: "/pages/register/register"
      });
    },
    jump(appId, url) {
      // #ifdef MP-WEIXIN
      uni.navigateToMiniProgram({
        appId: appId,
        path: url,
        extraData: {},
        success(res) {
          // 打开成功
        }
      });
      // #endif
      // #ifdef H5
      window.location.href = url;
      // #endif
    },
    getUserInfo() {
      if (uni.getStorageSync("mToken")) {
        uni.request({
          url: "https://kq.hzslsf.com/webchatmall-server/api/home/memberInfo", //仅为示例，并非真实接口地址。
          header: {
            mToken: uni.getStorageSync("mToken")
            // mToken:
            //   "J0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJGUk9NX09SR19QTEFURk9STSI6IkFBQkJDQ0RERUVGRkdHSEg2NiIsIlBIT05FIjoiMTg2NjgwMzg2ODciLCJleHAiOjE1OTM4Njg0ODJ9.oHHn8NdAw96KfdA4nvkBWQc2vyc882pRG8NtURlFEfE" //自定义请求头信息
          },
          success: res => {
            console.log("res", res);

            if (res.data.data) {
              this.vipBtnFlag = false;
            } else {
              uni.removeStorageSync("mToken");
            }
          }
        });
      } else {
        this.vipBtnFlag = true;
      }
    }
  }
};
</script>

<style>
.banner_img {
  width: 750rpx;
  height: 268rpx;
}

.swiper_wrapper {
  margin-top: -220rpx;
  margin-bottom: 30rpx;
}
.title_img {
  width: 750rpx;
  height: 180rpx;
}
.tag_img {
  width: 80rpx;
  height: 34rpx;
}
.end_title {
  width: 750rpx;
  height: 40rpx;
}
.end_title_1 {
  padding-top: 76rpx;
  color: #6b4725;
  font-size: 70rpx;
  text-align: center;
}
.end_title_2 {
  color: #6b4725;
  font-size: 78rpx;
  font-weight: bold;
  text-align: center;
  padding-bottom: 20rpx;
}
.card_vip {
  width: 750rpx;
  height: 736rpx;
  margin-top: 50rpx;
}
.btn {
  width: 702rpx;
  height: 104rpx;
  margin: 0 auto;
  margin-top: 20rpx;
  margin-bottom: 50rpx;
  font-size: 48rpx;
  text-align: center;
  font-weight: bold;
  line-height: 104rpx;
  color: #fff;
  background-color: #c79f7b;
  border-radius: 8rpx;
}
.web {
  display: flex;
  justify-content: center;
  align-items: center;
}
.border {
  border-top: 1px solid #c79f7b;
  width: 60rpx;
}
.web_text {
  padding: 0 40rpx;
  color: #666666;
}
.phone {
  text-align: center;
  color: #c7a07b;
  padding-top: 20rpx;
  padding-bottom: 66rpx;
  font-size: 24rpx;
}
.fixed_btn {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 999;
}
.fixed_btn_img {
  width: 88rpx;
  height: 262rpx;
}
.set_title {
  position: relative;
}
.set_title_a {
  position: absolute;
  top: 30rpx;
  left: 170rpx;
  color: #704d2c;
  font-size: 40rpx;
  z-index: 1;
}
.set_title_b {
  position: absolute;
  top: 80rpx;
  left: 210rpx;
  font-size: 28rpx;
  color: #999;
  z-index: 1;
}
.swiper-item {
  width: 702rpx;
  height: 302rpx;
  margin: 0 auto;
  border-radius: 14rpx;
}
.banner_item_img {
  width: 100%;
  height: 100%;
  border-radius: 14rpx;
}
</style>
